<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
<script src="../vue.js"></script>
</head>

<body>
<div id="app">

姓:<input type="text" v-model="firstName"><br>
名:<input type="text" v-model="lastName"><br>
全名:{{FullName}} <br>
<button @click="update">设置fullName的名字'wang zhongwang'</button>
</div>
<script>
    Vue.config.productionTip=false;

    const vm=new Vue({
        el:"#app",
        data(){
            return {
                count:0,
                firstName:"",
                lastName:""
            }
        },
        computed: {
            FullName:{
                //当计算属性被读取的时候,就会调用get方法,如果计算属性只有get方法则可以直接简写`计算属性(){return xxx}`
                get() {
                    console.log("get方法被调用");
                    return this.firstName.toUpperCase()+"-" +this.lastName.toUpperCase()

                },
                //当计算属性被设置的时候,就会调用set方法,并且set方法接受一个参数,这个参数就是被设置的值,当计算属性被设置以后做什么事情,根据情况来写就行
                set(value) {
                    console.log(value,"value");
                    [this.firstName,this.lastName]=value.split("")

                }
            }
        },
        methods :{
            update() {
                this.FullName ="wang zhongwang"
            }
        }
    })

    /*var o={
        name:"laowang",
        //age属性就是对象o的读取器(getter,setter)属性
        get age() {
            return 1+1
        },
        set age(value) {
            console.log(value);
        }
    },
    set age(value) {
        console.log(value);
    }
}
    //当你使用getter属性 就会调用get age方法 拿到返回值
    console.log(o.age);
    //当你是使用setter属性 就会调用 set age方法 方法接受一个参数就是你设置的值
    o.age =10
    */
</script>
</body>

</html>